<template>
	<view class="goods-list">
		<view class="goods-row" v-for="(row, rowIndex) in goodsRows" :key="rowIndex">
			<view class="goods-item" v-for="(item, index) in row" :key="item.id">
				<image class="goods-image" :src="item.image" mode="aspectFill"></image>
				<view class="goods-info">
					<text class="goods-title">{{ item.title }}</text>
					<view class="goods-details">
						<text class="goods-price">¥{{ item.price.toFixed(2) }}</text>
						<text class="goods-sales">{{ item.sales }}人付款</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsList: [{
						id: 1,
						image: '/static/goods/111.webp',
						title: '清新简约连衣裙',
						price: 129.00,
						sales: 1028
					},
					{
						id: 2,
						image: '/static/goods/2.webp',
						title: '轻薄透气运动鞋',
						price: 199.00,
						sales: 567
					},
					{
						id: 3,
						image: '/static/goods/3.webp',
						title: '多功能智能手表',
						price: 299.00,
						sales: 2103
					},
					{
						id: 4,
						image: '/static/goods/5.webp',
						title: '便携式蓝牙音箱',
						price: 89.00,
						sales: 3562
					},
					{
						id: 5,
						image: '/static/goods/6.webp',
						title: '便携式蓝牙音箱',
						price: 89.00,
						sales: 3562
					},
					{
						id: 6,
						image: '/static/goods/5.webp',
						title: '便携式蓝牙音箱',
						price: 89.00,
						sales: 3562
					},

				]
			}
		},
		computed: {
			goodsRows() {
				const rows = [];
				for (let i = 0; i < this.goodsList.length; i += 2) {
					rows.push(this.goodsList.slice(i, i + 2));
				}
				return rows;
			}
		}
	}
</script>

<style lang="scss">
	.goods-list {
		padding: 20rpx;
		background-color: #f8f8f8;

		.goods-row {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
		}

		.goods-item {
			width: 48%;
			background-color: #fff;
			border-radius: 12rpx;
			overflow: hidden;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

			.goods-image {
				width: 100%;
				height: 320rpx;
			}

			.goods-info {
				padding: 16rpx;

				.goods-title {
					font-size: 26rpx;
					color: #333;
					line-height: 1.4;
					height: 72rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.goods-details {
					margin-top: 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.goods-price {
						font-size: 30rpx;
						color: #ff6700;
						font-weight: bold;
					}

					.goods-sales {
						font-size: 22rpx;
						color: #999;
					}
				}
			}
		}
	}
</style>